<template>
  <div class="device_file">
    <el-dialog
      :title="titleText"
      width="800"
      :visible.sync="dialogTableVisible"
      v-dialogDrag
      :close-on-click-modal="false"
      customClass="mes_dialog">
      <div class="table_container">
        <el-table
          ref="tableNode"
          border
          style="width: 100%"
          v-loading="isLoading"
          :data="tableList"
          max-height="440">
          <el-table-column
            v-for="item in tableLabel"
            :key="item"
            :prop="item"
            :label="item"
            show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="mes_btn">
        <el-button @click="dialogTableVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'DeviceFile',
  data() {
    return {
      titleText: '设备附件详情',
      isLoading: false,
      tableList: [],
      tableLabel: [],
      dialogTableVisible: false
    }
  },
  methods: {
    init(fileName) {
      this.dialogTableVisible = true
      this.isLoading = true
      this.$store.dispatch('saveData', {
        method: 'get',
        url: 'a/deviceuploaddata/deviceUploadData/preview/' + fileName,
        noCommit: true
      }).then(res => {
        let data = res.data ? JSON.parse(res.data) : {records: [], labels: []}
        this.tableList = data.records
        this.tableLabel = data.labels
        if (data.file) {
          this.titleText = `设备附件详情（${data.file}）`
        } else {
          this.titleText = '设备附件详情'
        }
        this.isLoading = false
      }).catch(() => {
        this.isLoading = false
      })
    }
  }
}
</script>

<style scoped lang="less">
  .device_file{
    .table_container{
      margin: 20px 0;
    }
  }
</style>
